<!--
  Generated template for the AnnualStatisticsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<extendheader title="年度统计">
  <button ion-button item-end icon-left class="left" (click)="back()">
    <ion-icon name="ios-arrow-back"></ion-icon>
    返回
  </button>
  </extendheader>


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="下拉加载"
      refreshingSpinner="circles"
      refreshingText="数据加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list  *ngIf="lines && lines.length > 0">
    <ion-item class="lineselect">
      <ion-label>{{selectedLine.productionLineName}}</ion-label>
      <ion-select [(ngModel)]="selectedLine" [selectOptions]="{title:'产线选择'}" (ngModelChange)="changeline()" interface="Popover" okText="确定" cancelText="取消">
        <ion-option *ngFor="let line of lines" [value]="line">{{line.productionLineName}}</ion-option>
      </ion-select>
    </ion-item>
    <div id="topbox" *ngIf="showTopPie">
      <p style="text-align:center;margin:0;padding:10px 0;font-size:16px;">{{topPieTitle}}</p>
      <div id="toppie"></div>
      <div class="topsubcontent">
        <div class="fleft">
          <p>{{topInfo.firstPassPercent}}</p>
          <p>直通率</p>
        </div>
        <div class="fright">
          <p>{{topInfo.operationRate}}</p>
          <p>开工率</p>
        </div>
      </div>
    </div>
  <!-- <div *ngIf="!showTopPie" style="text-align:center;padding:20px 0;">暂无相关数据</div>   -->

    <ion-item-divider color="light" style="background:none;" *ngIf="prolist && prolist.length > 0">各类型产品生产明细</ion-item-divider>

    <div *ngIf="prolist && prolist.length <= 3">
        <div class="productdetails" *ngFor="let pro of prolist">
            <div class="producthead">
              <p>{{pro.productTypeName}}<span class="subtitle">生产总量</span><span class="titlenumber">{{pro.count | number:0}}</span></p>
            </div>
            <div class="productcontent">
              <div *ngFor="let proItem of pro.productsInfo">
                <p>{{proItem.productName}}</p>
                <p>生产量(件)<span>{{proItem.goodCount | number:0}}</span></p>
                <p>直通率(%)<span>{{proItem.firstPassPercent}}</span></p>
              </div>
            </div>
          </div>
      </div>
      <div *ngIf="prolist && prolist.length > 3">
        <div *ngFor="let pro of prolist;let indx=index" style="margin: 0px" class="productdetails">
            <div class="producthead" style="display:flex;justify-content:space-between;align-items:center;" (click)="showAccordion(indx)">
              <p>{{pro.productTypeName}}<span class="subtitle">生产总量</span><span class="titlenumber">{{pro.count | number:0}}</span></p>
              <button ion-button clear color="dark">
                <ion-icon name="ios-arrow-down" item-right *ngIf="indx == temp"></ion-icon>
                <ion-icon name="ios-arrow-forward" item-right *ngIf="indx != temp"></ion-icon>
              </button>
            </div>
            <div class="productcontent" *ngIf="indx == temp">
              <div *ngFor="let proItem of pro.productsInfo">
                <p>{{proItem.productName}}</p>
                <p>生产量(件)<span>{{proItem.goodCount | number:0}}</span></p>
                <p>直通率(%)<span>{{proItem.firstPassPercent}}</span></p>
              </div>
            </div>
          </div>
      </div>

  </ion-list>
  <!-- <div style="height:15px;background:#eee;"></div> -->
  <ion-slides class="piearea" pager *ngIf="prolist && prolist.length > 0" [ngClass]="{oneslide:prolist.length == 1}">
      <ion-slide *ngFor="let item of prolist; let i = index">
          <div *ngIf="item.defectInfo.length > 0" id="pie{{i}}"></div>
          <div *ngIf="item.defectInfo.length <= 0" id="pie{{i}}" style="padding-top:10px;">{{item.productTypeName}}暂无缺陷信息</div>
        </ion-slide>
  </ion-slides>
  <div *ngIf="prolist && prolist.length == 0" style="text-align:center;padding-top:20px;margin-top:90px;">
    <img src="./assets/imgs/nulldata.png" alt="没有找到相关数据">
    <p *ngIf="errMsg" style="font-size:20px;color:#d4d7dd;">{{errMsg}}</p>
    <p *ngIf="!errMsg" style="font-size:20px;color:#d4d7dd;">没有找到相关数据</p>
  </div>
</ion-content>
